<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>CMS系统-客服管理</title>

	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}">
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}">
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
	<!-- 引入组件库 -->
	<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app" v-cloak>
	<div class="main-content">
			<div class="page-header">
				<h1 class="page-title">客服管理</h1>
				<div class="z-pop_question">
                    <el-popover
                            ref="popoverq"
                            placement="bottom-start"
                            width="400"
                            trigger="hover">
                        <p class="z-jiao">设置您的客户在订货平台联系您的基础内容：如：QQ、微信、电话、旺旺
						</p>
                    </el-popover>

                    <i v-popover:popoverq class="el-icon-question"></i>
                </div>
				<div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>内容</div>
			</div>

				<div class="list-content">
					<!--条件筛选-->
					<div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
						<div class="input-select fl btn-radid_none">
						 <div class="filter-form filter-form-one clearfix">
	                        <el-input placeholder="客服名" v-model="conditions.name.value" clearable class="minW40 z_input-holder"></el-input>
	                        <el-select placeholder="类型" v-model="conditions.type.value" clearable class="z_select-holder">
	                            <el-option v-for="(value,key) in typeList" :key="key" :label="value" :value="key"></el-option>
	                        </el-select>
	                    </div>
	                    <div class="filter-operate">
	                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
	                        <el-tooltip class="item" content="查询" placement="bottom-start">
	                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
	                        </el-tooltip>
	                        <el-tooltip class="item" content="清空" placement="bottom-start">
	                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
	                        </el-tooltip>
	                    </div>	
						</div>
						<div class="filter-btn fr">
							<el-button type="primary" @click="showDailog">新增客服</el-button>
						</div>
					</div>

					<!--主体表格-->
					<div class="z-tables">
						<el-table ref="multipleTable" :data="customerSerList" style="width: 100%;" @selection-change="handleSelectionChange">
						    <el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="name" label="客服名" min-width="100"></el-table-column>
							<el-table-column  prop="typeName" label="类型" min-width="100"></el-table-column>
							<el-table-column prop="number" label="客服号码"  min-width="100"></el-table-column>
							<el-table-column prop="sortValue" label="排序"  min-width="100"></el-table-column>
							<el-table-column fixed="right" prop="" label="操作" min-width="80" class-name="table-operate-td">
								<template slot-scope="scope">
								    <el-button type="text" @click="editDailog(scope.row.uuid,scope.row.type,scope.row.name,scope.row.number,scope.row.sortValue)">编辑</el-button>
							        <span class="table-spea-line">|</span>
							        <el-button type="text" @click="handleDelete(scope.$position, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					
				  <!--批量操作-->
				   <div class="grid-content">
					<div class="bg-purple-left">
						<el-checkbox v-model="tableAllCheck" @change="tableAllCheckFn(customerSerList)"></el-checkbox>
					<el-dropdown @command="handleCommand" placement="top">
						<div class="el-input el-input--suffix">
							<input type="text" value="批量操作" readonly="readonly" class="el-input__inner">
							<span class="el-input__suffix">
								<span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up"></i></span>
							</span>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="b">批量删除</el-dropdown-item>
						</el-dropdown-menu>
					   </el-dropdown>
					</div>

					<!--分页-->
					<div class="bg-purple-light">
						<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage"
								:page-sizes="pageSizeList"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next"
								:total="totalNum">
						</el-pagination>
					 </div>
				</div>
			   <!-- 新增客服模态框 -->
				<el-dialog title="新增/编辑客服联系方式" :visible.sync="dialogFormVisible"  @close='closeDialog'>
					<el-form  ref="customerSer-form" :model="customerSer" :rules="rules" label-width="80px" class="demo-ruleForm">

						<el-form-item hidden label="ID" prop="uuid">
							<el-input v-model="customerSer.uuid"></el-input>
						</el-form-item>
						
						<el-form-item label="客服名" prop="name">
							<el-input v-model="customerSer.name" ></el-input>
						</el-form-item>

						<el-form-item label="类型" prop="type">
							<el-select v-model="customerSer.type" placeholder="类型">
								<el-option v-for="(value,key) in typeList" :key="key" :label="value" :value="key"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="客服号码" prop="number">
							<el-input v-model="customerSer.number" ></el-input>
						</el-form-item>

						<el-form-item label="排序" prop="sortValue">
							<el-input v-model="customerSer.sortValue" ></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer"  id="addDialog" >
						<el-button type="primary"  @click="saveCustomerSer">确 定</el-button>
						<el-button @click="dialogFormVisible = false">取 消</el-button>
					</div>
					<div slot="footer" class="dialog-footer"  id="editDialog" >
						<el-button type="primary"  @click="updateCustomerSer">确 定</el-button>
						<el-button @click="dialogFormVisible = false">取 消</el-button>
					</div>
				</el-dialog>
				<!-- 新增客服模态框 end -->
	   </div>
    </div>
  </div>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            customerSerList: [],
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            tableAllCheck: false,  // table 下方批量操作全选
            typeList: [[${typeNames}]],
            multipleSelection: [],
            customerSer: {
                name: '',
                type: '',
                number:'',
                sortValue:''
            },
            rules: {
                name: [
                    {required: true, message: "请输入客服名称", trigger: 'blur'}
                ],
                type: [
                    {required: true, message: "请选择客服类型", trigger: 'blur'}
                ],
                number: [
                    {required: true, message: "请输入客服号码", trigger: 'blur'}
                ],
                sortValue: [
                    {required: true, message: "请输入客服排序", trigger: 'blur'}
                ]
            },
            showChoice: false,
            conditions: {
                "name": {
                    "operation": "LIKE",
                    "value": ""
                },
                "type": {
                    "operation": "EQ",
                    "value": ""
                }
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,

            act: 0, //tab选项

            isLeft: false, //左右阴影
            isRight: false,

            tableData: [],
            dialogFormVisible: false,
        },
        created: function() {
            var self = this;
            var queryMessage = {
                "queryPage": self.currentPage,
                "pageShow": self.pageSize,
                "queryParams": self.conditions,
                "sortMap": {
                    "sortValue": "asc"
                }
            };
            $.ajax({
                url: "/backstage/cms/customerservice/list",
                type: "POST",
                data: JSON.stringify(queryMessage),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function(data) {
                    if (data && data.returnCode == "1") {
                        self.customerSerList = data.returnMessage;
                        self.totalNum = data.pager.totalNum;
                    }
                }
            });
        },
        methods: {
       	    // 表格选中项变化事件
		    handleSelectionChange(val) {
		        this.multipleSelection = val;
		    },
            handleQuery() {
                this.currentPage = 1;
                this.queryCustomerSer();
            },
            handleClear() {
                this.conditions.name.value = "";
                this.conditions.type.value = "";
            },
            tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },
            // 列表筛选项更多操作
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            saveCustomerSer: function () {
                let self = this;
                self.$refs['customerSer-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cms/customerservice/add",
                            type: "POST",
                            data: JSON.stringify(self.customerSer),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '新增客服成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = "/backstage/cms/customerservice/tolist"
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: '新增客服失败',
                                        type: 'error',
                                        customClass: 'message-center'
                                    });
                                }
                            },
                            error: function () {
                                self.$message({
                                    message: '系统异常，请联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                            }
                        });
                    }
                });
            },
            updateCustomerSer: function () {
                var self = this;
                self.$refs['customerSer-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cms/customerservice/edit",
                            type: "POST",
                            data: JSON.stringify(self.customerSer),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function(data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '编辑客服成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cms/customerservice/tolist';
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: '编辑客服失败',
                                        type: 'success',
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cms/customerservice/tolist';
                                        }
                                    });
                                }
                            }
                        });
                    }
            });
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryCustomerSer();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryCustomerSer();
            },
            handleCurrentTable: function (val) {
                window.location.href = 'edit.html?no=' + val.no;
            },
            queryCustomerSer: function() {
                var self = this;
                var queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "sortValue": "asc"
                    }
                };
                $.ajax({
                    url: "/backstage/cms/customerservice/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.customerSerList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                    }
                });
            },
            editDailog: function(uuid,type,name,number,sortValue){
                $("#addDialog").css('display','none');
                $("#editDialog").css('display','block');
                this.customerSer.uuid = uuid;
                this.customerSer.type = type;
                this.customerSer.name = name;
                this.customerSer.number = number;
                this.customerSer.sortValue = sortValue;
                this.dialogFormVisible = true;
            },
            showDailog: function () {
                $("#addDialog").css('display','block');
                $("#editDialog").css('display','none');
                this.dialogFormVisible = true;
            },
            //关闭弹框的事件
            closeDialog(){
                this.customerSer.type = '';//清空数据
                this.customerSer.name = '';//清空数据
                this.customerSer.number = '';//清空数据
                this.customerSer.sortValue = '';//清空数据
            },
            hideChoice: function () {
                this.showChoice = false;
            },
            handleDelete(position, row) {
                var self = this;
                self.$confirm('确认删除该条数据？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(_ => {
                    $.ajax({
                    url: "/backstage/cms/customerservice/delete",
                    type: "POST",
                    data: JSON.stringify([row.uuid]),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                            self.$message({
                            	message: '删除成功',
                                type: 'success',
                                duration: 1000,
                                customClass: 'message-center',
                                onClose: function () {
                                    window.location.href = '/backstage/cms/customerservice/tolist';
                                }
                           });
                        } else {
                            self.$message({
                                message: '删除失败',
                                duration: 1000,
                                type: 'error',
                                customClass: 'message-center'
                            });
                        }
                    }
                });
            })
          },
          handleCommand(command) {
              let self = this;
              if (self.multipleSelection.length <= 0) {
           	   self.$message({
                      message: '请先选择要删除的数据',
                      type: 'waring',
                      duration: 1000,
                      customClass: 'message-center'
                  });
                  return;
              }
              var deleteuIds = [];
              for (let i in this.multipleSelection) {
           	   deleteuIds.push(this.multipleSelection[i].uuid);
              }
              
              $.ajax({
                  url: "/backstage/cms/customerservice/delete",
                  type: "POST",
                  data: JSON.stringify(deleteuIds),
                  contentType: "application/json;charset=UTF-8",
                  dataType: "json",
                  success: function (data) {
                      if (data && data.returnCode == "1") {
                   	   self.$message({
                              message: '删除成功',
                              type: 'success',
                              duration: 1000,
                              customClass: 'message-center'
                          });
                   	   self.handleQuery();
                      } else {
                   	   self.$message({
                              message: '删除失败',
                              type: 'error',
                              duration: 1000,
                              customClass: 'message-center'
                          });
                      }
                  }
              });
              
           }
        }
    });
</script>
</body>
</html>